<template>
  <!-- 人员审核 -->
  <div class="common_content">
    <div class="gl_my_15">
      <el-input v-model="Api_GET_EventsManagementDelegationEntryQO.Filter" style="width:20%" suffix-icon="el-icon-search" placeholder="搜索" clearable size="mini" @change="getdelegationList()" />
    </div>
    <div v-if="peopleList.length > 0" v-loading="loading">
      <el-row :gutter="15">
        <el-col v-for="item in peopleList" :key="item.id" :span="8" class="gl_my_5">
          <el-card shadow="hover" :body-style="{ padding: '10px' }">
            <el-row :gutter="10">
              <el-col :span="7" align="center">
                <show-avatar
                  :src="getStaticAvatarUrl(item.register.imagePath)"
                  width="76px"
                  height="76px"
                  shape="circle"
                />
              </el-col>
              <el-col :span="17">
                <p class="gl_ft_weight" style="height: 18px;">{{ item.register.name }}</p>
                <div class="gl_mb_5 gl_ellipsis">
                  <span class="label_name">证件类型：</span>
                  <span class="label_content">
                    <template v-for="ktem in dict.idCardType">
                      {{ ktem.code === item.register.idCardTypeCode ? ktem.value : '' }}
                    </template>
                  </span>
                </div>
                <div class="gl_mb_5 gl_ellipsis">
                  <span class="label_name">证件号：</span>
                  <span class="label_content">{{ item.register.idCardNumber }}</span>
                </div>
                <div class="gl_mb_5 gl_ellipsis">
                  <span class="label_name">联系方式：</span>
                  <span class="label_content">{{ item.register.phoneNumber }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" type="flex" align="bottom" style="min-height: 50px;">
              <el-col :span="11">
                <el-tag v-for="(tag, jndex) in item.register.registerTags" :key="tag.id" size="mini" class="gl_mr_5 gl_mt_5" :type="tagsColorTheme[jndex]" :disable-transitions=" false">
                  {{ tag.registerTagType && tag.registerTagType.name || tag.registerTagTypeCode }}
                </el-tag>
              </el-col>
              <el-col :span="13">
                <div class="operate_bu" align="right">
                  <el-button type="primary" size="mini" @click="agreeJoin(item)">同意</el-button>
                  <el-button size="mini" @click="refuseJoin(item)">拒绝</el-button>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <div>
        <el-row class="gl_pt_20" style="text-align: center;">
          <el-pagination
            :current-page="Api_GET_EventsManagementDelegationEntryQO.Page"
            :page-size="Api_GET_EventsManagementDelegationEntryQO.MaxResultCount"
            :total="totalPage"
            layout="total,sizes,prev,pager,next,jumper"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="sizeChange"
            @current-change="pageIndexChange"
          />
        </el-row>
      </div>
    </div>
    <div v-else v-loading="loading">
      <div class="gl_noData">
        <p>暂无需要审核的申请</p>
      </div>
    </div>
  </div>
</template>
<script>
import {
  api_GET_EventsManagementDelegationEntry, // 获取审核列表
  api_PUT_EventsManagementDelegationEntryId, // 更改申请状态
  api_DELETE_EventsManagementDelegationEntryId
} from '@/extend/api/gameswaggerApi/app.js';
import { mapState, mapActions } from 'vuex';
import { Api_GET_EventsManagementDelegationEntryQO } from '@/lib/form/game/swaggerForm';

export default {
  name: 'Main',
  data() {
    return {
      Api_GET_EventsManagementDelegationEntryQO: new Api_GET_EventsManagementDelegationEntryQO(),
      delegationId: '',
      loading: false,
      tagsColorTheme: ['primary', 'success', 'info', 'warning'], // 标签颜色
      peopleList: [], // 获取到要审核的人员列表
      totalPage: 0
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType,
      dict: state => state.dict.dict
    })
  },
  watch: {
    'currentUserType': {
      handler: function(val) {
        if (val) {
          this.Api_GET_EventsManagementDelegationEntryQO.DelegationId = val.delegationId;
          // this.Api_GET_EventsManagementDelegationEntryQO.RegisterId = val.registerId;
          this.getdelegationList();
        }
      },
      deep: true,
      immediate: true // 初始加载
    }
  },
  created() {
    this.getDict();
    this.getdelegationList();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取人员审核列表
    getdelegationList(page) {
      if (!(this.currentUserType && this.currentUserType.delegationId)) return;
      this.loading = true;
      this.Api_GET_EventsManagementDelegationEntryQO.IncludeRegister = true;
      this.Api_GET_EventsManagementDelegationEntryQO.IncludeTags = true;
      this.Api_GET_EventsManagementDelegationEntryQO.IncludeRegisterTags = true;
      this.Api_GET_EventsManagementDelegationEntryQO.IsApproved = null;
      this.Api_GET_EventsManagementDelegationEntryQO.Page = page || 1;
      this.Api_GET_EventsManagementDelegationEntryQO.SkipCount = (this.Api_GET_EventsManagementDelegationEntryQO.Page - 1) * this.Api_GET_EventsManagementDelegationEntryQO.MaxResultCount;
      api_GET_EventsManagementDelegationEntry(this.Api_GET_EventsManagementDelegationEntryQO).then(res => {
        this.loading = false;
        this.peopleList = res.items;
        this.totalPage = res.totalCount;
        this.peopleList = this.peopleList.filter(item => item.isApproved === null);
      }).catch(res => {
        this.loading = false;
      });
    },
    // 同意加入申请
    agreeJoin(item) {
      if (item.isApproved === true) {
        this.$message({
          message: '该人员已经通过审核',
          type: 'warning'
        });
      } else {
        const param = {
          delegationId: item.delegationId,
          registerId: item.registerId,
          isApproved: true
        };
        api_PUT_EventsManagementDelegationEntryId(item.id, param).then(res => {
          this.$message({
            message: '加入成功',
            type: 'success'
          });
          this.getdelegationList();
        });
      }
    },
    // 拒绝加入申请
    refuseJoin(item) {
      console.log(item);
      this.$confirm('您确定拒绝该人员的申请吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // const param = {
        //   delegationId: item.delegationId,
        //   registerId: item.registerId,
        //   isApproved: false
        // };
        api_DELETE_EventsManagementDelegationEntryId(item.id).then(res => {
          this.getdelegationList();
        });
      });
    },
    // 头像回显
    getStaticAvatarUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_EventsManagementDelegationEntryQO.MaxResultCount = MaxResultCount;
      this.getMessageList();
    },
    pageIndexChange(currentPage) {
      this.getMessageList(currentPage);
    }
  }
};
</script>
<style scoped>
.common_content{
  padding:0px 20px 20px;
  font-size: 14px;
}
.tag span{
  height:20px;
  width:44px;
  background:rgba(49,69,108,0.1);
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  border-radius: 4px;
  margin-right: 4px;
}
.label_name {
  font-size: 14px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
}
.label_content {
  color: #333;
  font-size: 14px;
}
</style>
